@mixin slider-size($height, $handle-size, $dot-top) {
  height: $height !important;

  & .ant-slider-step {
    height: $height !important;
  }

  // 激活状态的刻度文本样式
  & .ant-slider-mark-text-active {
    @apply text-cn-12 !important;
    color: var(--text-3) !important;
  }

  // marks文案偏移样式
  & .ant-slider-mark-text {
    @apply text-cn-12 !important;
    color: var(--text-3) !important;
    // 0开头的文案向后偏移5px
    &[style*='left: 0%'] {
      left: 2px !important;
      transform: translateX(0) !important;
    }

    // 100结尾的文案向前偏移5px
    &[style*='left: 100%'] {
      left: calc(100% - -5px) !important;
      transform: translateX(-100%) !important;
    }
  }

  & .ant-slider-mark {
    top: $dot-top !important;
  }

  & .ant-slider-track {
    background: linear-gradient(90deg, #1b6dfa 0%, #00d0fe 181.25%);
    height: $height !important; // 可选：调整轨道高度
    border-radius: 20px !important;
  }

  & .ant-slider-rail {
    background: var(--line-2) !important;
    height: $height !important; // 可选：调整轨道高度
    border-radius: 20px !important;
  }

  & .ant-slider-handle {
    width: $handle-size !important;
    height: $handle-size !important;

    &::after,
    &::before {
      width: $handle-size !important;
      height: $handle-size !important;
      background-size: $handle-size $handle-size !important;
    }
  }
}

@mixin slider-size-vertical($width, $handle-size, $dot-left) {
  width: $width !important;
  min-height: 200px !important;

  & .ant-slider-step {
    width: $width !important;
    height: 100% !important;
  }

  & .ant-slider-mark {
    left: $dot-left !important;
  }

  // 垂直滑块marks文案偏移样式
  & .ant-slider-mark-text {
    @apply text-cn-12 !important;
    color: var(--text-3) !important;
    left: calc(100% + 5px) !important; // 所有文案向右偏移8px

    // 0开头的文案向下偏移5px
    &[style*='bottom: 0%'] {
      bottom: -4px !important;
      transform: translateY(0) !important;
    }

    // 100结尾的文案向上偏移5px
    &[style*='bottom: 100%'] {
      bottom: calc(100% - -6px) !important;
      transform: translateY(100%) !important;
    }
  }

  & .ant-slider-track {
    background: linear-gradient(180deg, #1b6dfa 0%, #00d0fe 181.25%);
    width: $width !important;
    border-radius: 20px !important;
  }

  & .ant-slider-rail {
    background: var(--line-2) !important;
    width: $width !important;
    height: 100% !important;
    border-radius: 20px !important;
  }

  & .ant-slider-handle {
    width: $handle-size !important;
    height: $handle-size !important;

    &::after,
    &::before {
      width: $handle-size !important;
      height: $handle-size !important;
      background-size: $handle-size $handle-size !important;
    }
  }
}

// 水平滑块样式
.rg-slider {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;

  @include slider-size(10px, 20px, 20px);

  // 水平滑块的刻度点样式 - 竖线
  .ant-slider-step .ant-slider-dot {
    width: 1px !important;
    height: 6px !important;
    background: var(--line-2) !important;
    border: none !important;
    border-radius: 0 !important;
    top: 13px !important;
    transform: translateY(-50%) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    // 0开头的刻度点向后偏移5px
    &[style*='left: 0%'] {
      left: 5px !important;
    }

    // 100结尾的刻度点向前偏移5px
    &[style*='left: 100%'] {
      left: calc(100% - 5px) !important;
    }
  }

  &.ant-slider.ant-slider-disabled .ant-slider-track {
    background: var(--brand-color-disabled) !important;
  }

  &.ant-slider.ant-slider-disabled .ant-slider-handle {
    &::after {
      outline: 2px solid white !important;
      box-shadow: none !important;
    }

    &:hover {
      &::after {
        outline: 2px solid white !important;
      }
    }

    &:active {
      &::after {
        outline: 2px solid white !important;
      }
    }
  }

  & .ant-slider-handle {
    border: none !important;

    &:hover {
      &::after {
        outline: 2px solid var(--brand-color-hover) !important;
      }
    }

    &:active {
      &::after {
        outline: 2px solid var(--brand-color-active) !important;
      }
    }

    &::after {
      background: url('../../../assets/icons/slider.svg') no-repeat center center;

      border: none !important;
      box-shadow: 0px 0px 5px 0px #474c5f26, 0px 2px 4px -1px #0000001f, 0px 4px 5px 0px #00000014,
        0px 1px 10px 0px #0000000d !important;
      // box-shadow: 0 0 10px 0 #474c5f26 !important;
      inset-inline-start: -2px !important;
      inset-block-start: -2px !important;
      outline: 2px solid transparent !important;
    }
  }

  & .ant-slider-handle {
    &::before {
      // width: 20px !important;
      // height: 20px !important;
      border: none !important;
    }
  }

  &--small {
    @include slider-size(4px, 12px, 12px);

    // small状态下的handle特殊定位
    & .ant-slider-handle {
      &::after {
        inset-inline-start: -1px !important;
        inset-block-start: -1px !important;
      }
    }

    // small状态下的刻度点样式 - 竖线
    .ant-slider-step .ant-slider-dot {
      width: 1px !important;
      height: 6px !important;
      background: var(--line-2) !important;
      border: none !important;
      border-radius: 0 !important;
      top: 7px !important;
      transform: translateY(-50%) !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;

      // 0开头的刻度点向后偏移3px
      &[style*='left: 0%'] {
        left: 2px !important;
      }

      // 100结尾的刻度点向前偏移3px
      &[style*='left: 100%'] {
        left: calc(100% - -5px) !important;
      }
    }

    // small状态下的文本标签偏移
    .ant-slider-mark-text {
      // 0开头的文本向后偏移3px
      &[style*='left: 0%'] {
        left: 2px !important;
        transform: translateX(0) !important;
      }

      // 100结尾的文本向前偏移3px
      &[style*='left: 100%'] {
        left: calc(100% + 5px) !important;
        transform: translateX(-100%) !important;
      }
    }

    .ant-slider-step .ant-slider-dot {
      width: 1px !important;
      height: 6px !important;
      background: var(--line-2) !important;
      border: none !important;
      border-radius: 0 !important;
      top: 7px !important;
      transform: translateY(-50%) !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;

      // 0开头的刻度点向后偏移5px
      &[style*='left: 0%'] {
        left: 5px !important;
      }

      // 100结尾的刻度点向前偏移5px
      &[style*='left: 100%'] {
        left: calc(100% - 5px) !important;
      }
    }
  }
}

// 垂直滑块样式
.rg-slider--vertical {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  height: auto !important;

  @include slider-size-vertical(10px, 20px, 20px);

  // 垂直滑块的handle特殊定位
  & .ant-slider-handle {
    &::after {
      background: url('../../../assets/icons/slider.svg') no-repeat center center !important;
      inset-inline-start: -2px !important;
      inset-block-start: -2px !important;
    }
  }

  // 垂直滑块的刻度点样式 - 横线
  .ant-slider-step .ant-slider-dot {
    width: 6px !important;
    height: 1px !important;
    background: var(--line-2) !important;
    border: none !important;
    border-radius: 0 !important;
    left: 14px !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    // 0开头的刻度点向下偏移5px
    &[style*='bottom: 0%'] {
      bottom: 5px !important;
    }

    // 100结尾的刻度点向上偏移5px
    &[style*='bottom: 100%'] {
      bottom: calc(100% - 5px) !important;
    }
  }

  // 垂直滑块禁用状态
  &.ant-slider.ant-slider-disabled .ant-slider-track {
    background: var(--brand-color-disabled) !important;
  }

  &.ant-slider.ant-slider-disabled .ant-slider-handle {
    &::after {
      outline: 2px solid white !important;
      box-shadow: none !important;
    }

    &:hover {
      &::after {
        outline: 2px solid white !important;
      }
    }

    &:active {
      &::after {
        outline: 2px solid white !important;
      }
    }
  }

  // 垂直滑块handle样式
  & .ant-slider-handle {
    border: none !important;

    &:hover {
      &::after {
        outline: 2px solid var(--brand-color-hover) !important;
      }
    }

    &:active {
      &::after {
        outline: 2px solid var(--brand-color-active) !important;
      }
    }

    &::after {
      background: url('../../../assets/icons/slider.svg') no-repeat center center;
      border: none !important;
      box-shadow: 0px 0px 5px 0px #474c5f26, 0px 2px 4px -1px #0000001f, 0px 4px 5px 0px #00000014,
        0px 1px 10px 0px #0000000d !important;
      inset-inline-start: -2px !important;
      inset-block-start: -2px !important;
      outline: 2px solid transparent !important;
    }

    &::before {
      border: none !important;
    }
  }

  &--small {
    @include slider-size-vertical(4px, 12px, 12px);

    // small状态下的handle特殊定位
    & .ant-slider-handle {
      &::after {
        inset-inline-start: -1px !important;
        inset-block-start: -1px !important;
      }
    }

    // small状态下的刻度点样式 - 横线
    .ant-slider-step .ant-slider-dot {
      width: 6px !important;
      height: 1px !important;
      background: var(--line-2) !important;
      border: none !important;
      border-radius: 0 !important;
      left: 7px !important;
      top: auto !important;
      transform: translateX(-50%) !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;

      // 0开头的刻度点向下偏移3px
      &[style*='bottom: 0%'] {
        bottom: 3px !important;
      }

      // 100结尾的刻度点向上偏移3px
      &[style*='bottom: 100%'] {
        bottom: calc(100% - 3px) !important;
      }
    }

    // small状态下的文本标签偏移
    .ant-slider-mark-text {
      left: calc(100% + 6px) !important;

      // 0开头的文本向下偏移1px
      &[style*='bottom: 0%'] {
        bottom: -6px !important;
        transform: translateY(0) !important;
      }

      // 100结尾的文本向上偏移4px
      &[style*='bottom: 100%'] {
        bottom: calc(100% - 31px) !important;
        transform: translateY(-100%) !important;
      }
    }
  }
}
